<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="../../css/api.css">

    <link rel="stylesheet" href="../../css/base_bai/base.css">


    <title>红包</title>

    <style type="text/css">

        html, body{font-size: 100%;    height: auto;}
        #app,.videos_sty,.videos_sty>video{width: 100%;height: 100%}
        .videos_sty>video{display: block;}

    *{margin: 0;padding: 0;border: 0}

    [Play]{ position: fixed;  margin: auto;top: 35%;   width: 100%;  text-align: center;}
    [Play]>i{color:white}

    .van-goods-action-icon__icon{    color: #7d7e80;    margin: 0 auto 0px;}
    .van-goods-action-icon{height:auto}

    [fot]{display: flex;  align-items: center;background: white;    position: fixed;  width: 100%;  bottom: 0; height: 3rem; }
    [fot]>div{margin: 0 .5rem}
    [next]{flex: 1;  text-align: right;}
    [next]>button{ background: #FF9900;  color: white;border-radius: 2rem;  height: 2.3rem;  line-height: 2.3rem;width: 100%;}

    [time]{position: absolute;  color: white;  top: 10%;  right: 5%;}
    [time]>span{color:white;width: 5rem;background: #adadad;border-radius: 2rem;;text-align: center;line-height: 1.8rem;opacity: 0.2}

    [cont_1]{font-size: 0.7rem; position: absolute;  color: white;  bottom: 5rem;width: 80%;}
    [cont_1]>div:nth-child(1){font-size: 0.9rem}
    [cont_1]>div{padding: 0.5rem 0.5rem}
    [cont_1]>div button{height: auto;line-height: 1.5rem;padding: .2rem 0rem;width:100%;background: #FF9900;border:0;color:white}
    [cont_1] .van-button__text{    display: flex;  justify-content: center;  align-items: center;}

    [cont_2]{position: absolute;  color: white;  bottom: 10rem;width: 20%;right: 5%}
    [cont_2]{font-size: 0.7rem}
    [cont_2] img{    width: 2rem;  height: 2rem;}
    [cont_2]>div{    text-align: right;padding: 0.2rem 0;}
    </style>

</head>

<body id="content">
    <div id="app" v-cloak>
      <span Play>
        <van-icon v-show="sub_sta" name="play-circle-o" size="80px" />
      </span>
      <div time><span ><span></div>
      <div time><span style="opacity:1;background: border-box;" >{{remember_time}}&nbsp;s</span></div>
      <div cont_1>

              <div>@优买单</div>
              <div>一直致力于寻找优质货源产品，让用户购买 到优质的产品和服务，致力于寻找优质货源 产品，让用户购买到优质的产品和服务</div>
              <div><van-button   />招商说明<van-icon name="arrow" /></div>

      </div>
      <div cont_2>

              <div>
                <img src="../../image/rob_video_1.png"/>
                <div>视频同款</div>
              </div>
              <div>
                <img src="../../image/rob_video_2.png"/>
                  <div>董先生</div>
              </div>
              <div>
                <img src="../../image/rob_video_3.png"/>
                  <div>一键导航</div>
              </div>

      </div>
      <div class="videos_sty">
        <video src="../../image/rob_index_7.mp4" @click="staEnd(event)" onended="alert('开始播放下一个视频')"   poster="../../image/rob_index_8.jpg" autoplay="autoplay">
        <source src="../../image/rob_index_7.mp4" type="video/mp4" />
      </video>
      </div>

      <div  fot>
              <div @click="closeWin()" style="    text-align: center;color:#979899"><div role="button" tabindex="0" class="van-goods-action-icon"><div class="van-icon van-icon-arrow-left van-goods-action-icon__icon"><!----></div>返回</div></div>

              <div next><van-button type="default">抢下一个红包</van-button></div>
      </div>

    </div>

</body>
<script src="../../script/api.js"></script>
<script src="../../script/base_bai/vue.js"></script>
<script src="../../script/base_bai/vant.js"></script>
<script src="../../script/base_bai/area.js"></script>
<script src="../../script/base_bai/base.js"></script>
<script src="../../script/base_bai/temp.js"></script>
<script type="text/javascript">
    apiready = function() {
        headerH = $api.fixStatusBar($api.byId('content'));
        api.setStatusBarStyle({
           style : 'dark',
           color: "black"
       });
        Vue.prototype.$ac = api;

        initVue()

    };
if(BrowserType()=='pc'){
    initVue()
}

    function initVue() {
        new Vue({
            el: '#app',
            data: {
              remember_time:0,
              sub_sta:false,
            },
            methods: {
            staEnd(elem){
              console.log(elem.target.paused)
              if(elem.target.paused){
                elem.target.play()
                this.sub_sta=false;
              }else{
                    elem.target.pause()
                      this.sub_sta=true;
              }

            }


            }
        });

    }
</script>

</html>
